<template>
  <section class="block-wrapper">
    <div class="heading">{{ title }}</div>
    <div class="block-content">
      <slot />
    </div>
  </section>
</template>

<script setup lang="ts">
import type { IColumn } from '@/types';

type IFormState = Record<string, unknown>;

const props = defineProps({
  title: { type: String, required: true },
  items: { type: Array as PropType<IColumn[]>, default: () => [] },
  formData: { type: Object as PropType<IFormState>, default: () => ({}) },
  /**
   * 过滤表单项的方法，可以根据表单数据进行联动处理
   */
  filterFormItems: {
    type: Function as PropType<(cols: IColumn[], formState: IFormState) => IColumn[]>,
  },
});
// const emit = defineEmits<{
//   (e: 'ok', state: IFormState): void;
//   /**
//    * 表单项值改变时触发
//    */
//   (e: 'values-change', changedValues: IFormState): void;
// }>();
</script>

<style scoped lang="less">
.block-wrapper {
  padding: 10px 10px;
  background: #fff;

  .heading {
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: inline-block;
      margin-right: 10px;
      width: 4px;
      height: 22px;
      background: #1890ff;
    }
  }
}
</style>

<style>
.tc {
  text-align: center;
}
</style>
